<template>
    <div class="page-container">
      <div class="sidebar">
        <!-- 使用v-for循环生成按钮，绑定点击事件和类 -->
        <button
          v-for="(item, index) in sidebarItems"
          :key="index"
          :class="{ 'active-button': currentIndex === index }"
          @click="showComponent(index)"
          class="sidebar-button"
        >
          {{ item.label }}
        </button>
      </div>
      <div class="router-view-container">
        <!-- 根据currentComponent动态渲染组件 -->
        <component :is="currentComponent"></component>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  // 引入各个组件
  import Gongzuotai from '@/views/shouye/Gongzuotai.vue';
  import Jiuzhenjindu from '@/views/shouye/Jiuzhenjindu.vue';
  import Kehudangan from '@/views/shouye/Kehudangan.vue';
  import Yuyuepaiban from '@/views/shouye/Yuyuepaiban.vue';
  import Dengjixinxi from '@/views/shouye/Dengjixinxi.vue';
  import Yishengmenzhen from '@/views/shouye/Yishengmenzhen.vue';
  import Binglimoban from '@/views/shouye/Binglimoban.vue';
  import Chufangmoban from '@/views/shouye/Chufangmoban.vue';
  import Buhelichufangchaxun from '@/views/shouye/Buhelichufangchaxun.vue';
  
  // 定义侧边栏按钮的数组，包含按钮文本和对应的组件
  const sidebarItems = [
    { label: '工作台', component: Gongzuotai },
    { label: '就诊进度', component: Jiuzhenjindu },
    { label: '病例管理', component: Kehudangan },
    { label: '诊疗申请', component: Dengjixinxi },
    { label: '医生门诊', component: Yishengmenzhen },
    { label: '病例模板', component: Binglimoban },
    { label: '处方模板', component: Chufangmoban },
    
  ];
  
  // 定义当前显示的组件和当前激活的按钮索引
  const currentComponent = ref(sidebarItems[0].component);
  const currentIndex = ref(0);
  
  // 点击按钮时的方法，更新当前显示的组件和激活的按钮索引
  const showComponent = (index) => {
    currentComponent.value = sidebarItems[index].component;
    currentIndex.value = index;
  };
  </script>
  
  <style scoped>
  .page-container {
    min-height: 100vh;
    background-image: linear-gradient(to bottom, #ffffff, #e0f2ff);
    display: flex;
  }
  
  .sidebar {
    width: 200px;
    background: linear-gradient(to bottom, #007bff, #0096ff);
    position: fixed;
    height: 100%;
    overflow: auto;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  }
  
  .sidebar-button {
    display: block;
    width: 100%;
    padding: 25px 50px;
    margin-bottom: 30px;
    border: none;
    background-color: transparent;
    color: white;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 16px;
    text-decoration: none;
  }
  
  .sidebar-button:hover,
  .active-button {
    background-color: rgba(255, 255, 255, 0.2);
  }
  
  .router-view-container {
    margin-left: 210px;
    padding: 20px;
    flex: 1;
    border: 2px solid #a6c8ff;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.8);
  }
  </style>